<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滑动条</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <br>
  <input class="easyui-slider" value="12" style="width: 400px"
    data-options="showTip: true, rule: [0,'|',20,'|',40,'|',60,'|',80,'|',100]">
  <br>
  <hr>
  <br>
  <input id="slider">
  <script type="text/javascript">
  function rule() {
    var array = new Array();
    for (var i = 0; i < 10; i++) {
      array[i * 2] = 10 * i;
      array[2 * i + 1] = '|';
    }
    array[2 * 10] = 10 * 10;
    console.log(array);
    return array;
  }
  $(function () {
    $("#slider").slider({
      //滑动条宽度
      width: 600,
      //默认值
      value: 0,
      //是否显示值信息提示
      showTip: true,
      //显示标签旁边的滑块，'|'只显示一行。默认值为[]
      rule: rule(),
      //是否显示滑块范围，默认值为false
      //range: true,
      //值每次增加或减少的最小值，默认值为1
      step: 5,
      //是否将最小值和最大值对调位置，默认值为false
      reversed: true
    })
  })
  </script>
</body>
</html>